<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/8/21 0021
  Time: 15:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="gb2312">
    <title>无标题文档</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            background-image:url(images/squidback.gif);
        }
        #da{
            width:1000px;
            height:800px;
            margin:auto;
        }
        #waiCol1{
            width:100px;
            height:800px;
            background-color:#F00;
            float:left;
            opacity:0.4;
        }
        #waiCol3{
            width:100px;
            height:800px;
            background-color:#F00;
            float:right;
            opacity:0.4;
        }
        #waiCol2{
            width:790px;
            height:800px;
            margin-left:105px;
        }
        #neiRow1{
            width:790px;
            height:120px;
            background-color:#990;
        }
        #neiRow2{
            width:790px;
            height:30px;
            background-color:#96F;
            margin:5px 0;
            background-image:url(images/pb.gif);
        }
        #neiRow3{
            width:790px;
            height:500px;
            margin:0 0 5px 0;
        }
        #neiRow4{
            width:790px;
            height:135px;
            background-color:#96F;
        }
        #neiRow5,#neiRow6,#neiRow7,#neiRow8,#neiRow9,#neiRow10,#neiRow11,#neiRow12,#neiRow13{
            width:790px;
            height:500px;
            margin:0 0 5px 0;
            display:none;
        }
        #row3_cL{
            width:635px;
            height:500px;
            float:left;
        }
        #row3_cR{
            width:150px;
            height:500px;
            float:right;
        }
        #daoHang{
            margin:0;
            padding:0;
            padding-top:6px;
        }
        #daoHang li{
            display:inline;/*显示风格为行方式*/
            padding:7px 2px;
            background-image:url(images/pb.gif);
        }
        #daoHang li:hover{
            color:#FFF;
            background-image:url(images/pbred.gif);
            cursor:pointer;/*手型鼠标光标*/
        }
        .row3_LR3{
            background-color:#369;
        }
        .row3_LR5{
            background-color:#39F;
        }
        .row3_LR6{
            background-color:#CF0;
        }
        .row3_LR7{
            background-color:#C63;
        }
        .row3_LR8{
            background-color:#C6F;
        }
        .row3_LR9{
            background-color:#069;
        }
        .row3_LR10{
            background-color:#936;
        }
        .row3_LR11{
            background-color:#039;
        }
        .row3_LR12{
            background-color:#F90;
        }
        .row3_LR13{
            background-color:#F6F;
        }
    </style>
</head>

<body>
<div id="da">
    <div id="waiCol1"></div>
    <div id="waiCol3"></div>
    <div id="waiCol2">
        <div id="neiRow1"></div>
        <div id="neiRow2">
            <ul id="daoHang">
                <li id="p3" onClick="showPage(this.id)" style="margin-left:30px;">大家好吗</li>
                <li id="p5" onClick="showPage(this.id)">大家好吗</li>
                <li id="p6" onClick="showPage(this.id)">大家好吗</li>
                <li id="p7" onClick="showPage(this.id)">大家好吗</li>
                <li id="p8" onClick="showPage(this.id)">大家好吗</li>
                <li id="p9" onClick="showPage(this.id)">大家好吗</li>
                <li id="p10" onClick="showPage(this.id)">大家好吗</li>
                <li id="p11" onClick="showPage(this.id)">大家好吗</li>
                <li id="p12" onClick="showPage(this.id)">大家好吗</li>
                <li id="p13" onClick="showPage(this.id)">大家好吗</li>
            </ul>
        </div>
        <div id="neiRow3">
            <div id="row3_cL" class="row3_LR3">3333</div>
            <div id="row3_cR" class="row3_LR3">3333</div>
        </div>
        <div id="neiRow5">
            <div id="row3_cL" class="row3_LR5">5555</div>
            <div id="row3_cR" class="row3_LR5">5555</div>
        </div>
        <div id="neiRow6">
            <div id="row3_cL" class="row3_LR6">666</div>
            <div id="row3_cR" class="row3_LR6">666</div>
        </div>
        <div id="neiRow7">
            <div id="row3_cL" class="row3_LR7">777</div>
            <div id="row3_cR" class="row3_LR7">777</div>
        </div>
        <div id="neiRow8">
            <div id="row3_cL" class="row3_LR8">8888</div>
            <div id="row3_cR" class="row3_LR8">888</div>
        </div>
        <div id="neiRow9">
            <div id="row3_cL" class="row3_LR9">9999</div>
            <div id="row3_cR" class="row3_LR9">9999</div>
        </div>
        <div id="neiRow10">
            <div id="row3_cL" class="row3_LR10">10</div>
            <div id="row3_cR" class="row3_LR10">10</div>
        </div>
        <div id="neiRow11">
            <div id="row3_cL" class="row3_LR11">11</div>
            <div id="row3_cR" class="row3_LR11">11</div>
        </div>
        <div id="neiRow12">
            <div id="row3_cL" class="row3_LR12">12</div>
            <div id="row3_cR" class="row3_LR12">12</div>
        </div>
        <div id="neiRow13">
            <div id="row3_cL" class="row3_LR13">13</div>
            <div id="row3_cR" class="row3_LR13">13</div>
        </div>
        <div id="neiRow4"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    function showPage(id)
    {
        var Page3=document.getElementById("neiRow3");
        var Page5=document.getElementById("neiRow5");
        var Page6=document.getElementById("neiRow6");
        var Page7=document.getElementById("neiRow7");
        var Page8=document.getElementById("neiRow8");
        var Page9=document.getElementById("neiRow9");
        var Page10=document.getElementById("neiRow10");
        var Page11=document.getElementById("neiRow11");
        var Page12=document.getElementById("neiRow12");
        var Page13=document.getElementById("neiRow13");
        switch(id)
        {
            case "p3":
                Page3.style.display="block";
                Page5.style.display="none";
                Page6.style.display="none";
                Page7.style.display="none";
                Page8.style.display="none";
                Page9.style.display="none";
                Page10.style.display="none";
                Page11.style.display="none";
                Page12.style.display="none";
                Page13.style.display="none";
                break;
            case "p5":
                Page3.style.display="none";
                Page5.style.display="block";
                Page6.style.display="none";
                Page7.style.display="none";
                Page8.style.display="none";
                Page9.style.display="none";
                Page10.style.display="none";
                Page11.style.display="none";
                Page12.style.display="none";
                Page13.style.display="none";
                break;
            case "p6":
                Page3.style.display="none";
                Page5.style.display="none";
                Page6.style.display="block";
                Page7.style.display="none";
                Page8.style.display="none";
                Page9.style.display="none";
                Page10.style.display="none";
                Page11.style.display="none";
                Page12.style.display="none";
                Page13.style.display="none";
                break;
            case "p7":
                Page3.style.display="none";
                Page5.style.display="none";
                Page6.style.display="none";
                Page7.style.display="block";
                Page8.style.display="none";
                Page9.style.display="none";
                Page10.style.display="none";
                Page11.style.display="none";
                Page12.style.display="none";
                Page13.style.display="none";
                break;
            case "p8":
                Page3.style.display="none";
                Page5.style.display="none";
                Page6.style.display="none";
                Page7.style.display="none";
                Page8.style.display="block";
                Page9.style.display="none";
                Page10.style.display="none";
                Page11.style.display="none";
                Page12.style.display="none";
                Page13.style.display="none";
                break;
            case "p9":
                Page3.style.display="none";
                Page5.style.display="none";
                Page6.style.display="none";
                Page7.style.display="none";
                Page8.style.display="none";
                Page9.style.display="block";
                Page10.style.display="none";
                Page11.style.display="none";
                Page12.style.display="none";
                Page13.style.display="none";
                break;
            case "p10":
                Page3.style.display="none";
                Page5.style.display="none";
                Page6.style.display="none";
                Page7.style.display="none";
                Page8.style.display="none";
                Page9.style.display="none";
                Page10.style.display="block";
                Page11.style.display="none";
                Page12.style.display="none";
                Page13.style.display="none";
                break;
            case "p11":
                Page3.style.display="none";
                Page5.style.display="none";
                Page6.style.display="none";
                Page7.style.display="none";
                Page8.style.display="none";
                Page9.style.display="none";
                Page10.style.display="none";
                Page11.style.display="block";
                Page12.style.display="none";
                Page13.style.display="none";
                break;
            case "p12":
                Page3.style.display="none";
                Page5.style.display="none";
                Page6.style.display="none";
                Page7.style.display="none";
                Page8.style.display="none";
                Page9.style.display="none";
                Page10.style.display="none";
                Page11.style.display="none";
                Page12.style.display="block";
                Page13.style.display="none";
                break;
            case "p13":
                Page3.style.display="none";
                Page5.style.display="none";
                Page6.style.display="none";
                Page7.style.display="none";
                Page8.style.display="none";
                Page9.style.display="none";
                Page10.style.display="none";
                Page11.style.display="none";
                Page12.style.display="none";
                Page13.style.display="block";
                break;
        }
    }

</script>
</html>
